<template>
	<view>
		<!-- 顶部选择栏 -->
		<div class="top">
			<div class="option">
				<div class="recomm" @click="opens">
					推荐
				</div>
				<div class="recomm">
					销量
				</div>
				<div class="recomm">
					价格
				</div>
				<div class="recomm">
					新品优先
				</div>
			</div>
		</div>

		<!-- 内容 -->
		<view class="content">
			<div class="options"v-for="(item,index) in goodslist" :key="index">
				<image :src="item.goodimg" mode="" class="img" @click="detail"></image>
				<div class="text">
					{{item.goodNames}}
				</div>
				<div class="texts">
					￥{{item.goodprice}}
				</div>
				<div class="shop"  @click="click_index(index)">
					<image src="../static/images/购物车.png" mode=""></image>
				</div>
			</div>
		</view>
		
		<view>
			<!-- 变暗的背景 -->
			<view class="mask" @click="hideModal" v-if="showModalStatus"></view>
			<!-- 底部弹出框 -->
			<view :animation="animationData" class="bottom_box" v-if="showModalStatus">
				<!-- 底部框的内容 -->
				<view class="bottom_box_center">
					<!-- 取消 -->
					<view class="right_x" @click="close_box">
					</view>
					<!-- 左边图片 -->
					<view class="box_center_img">
						<image src="../static/phone.jpg" mode="aspectFit"></image>
					</view>
					<!-- 右边部件 -->
					<view class="box_center_right">
						<!-- 填充右侧部件从上到下1-3 -->
						<view class="box_center_right1" v-for="(item,index) in goodslist" :key="index">
						
						</view>
		
						<view class="box_center_right3">
							<text class="right2_text">数量:</text>
							<!-- 购物车加减号 -->
							<view class="reduce" @click="reducenum"></view>
							<view class="right2_items">
								<text>{{goodnum}}</text>
							</view>
							<view class="add" @click="addnum"></view>
						</view>
					</view>
		
				</view>
				<view class="bottom_box_footer">
					<view class="box_footer_left">
						合计:
					</view>
					<view class="box_footer_bottom">
						￥{{onlyPrice}}
					</view>
		
					<!-- 左边加入购物车按钮 -->
					<view class="box_footer_shop" @click="addToCart">
						<text>加入购物车</text>
					</view>
				</view>
		
			</view>
		</view>
	</view>
</template>


<script>
	import {
		setStorage,
		getStorage,
		removeStorage
	} from '../common/local/local.js'
	import tips from '../common/Tips/tip.js'
	
	export default {
		// 计算价格
		computed: {
			onlyPrice() {
				var price = 0
				price += this.goodnum * this.goodslist[this.click_id].goodprice
				// 返回结果保留两位小数点
				return price.toFixed(2)
			}
		},
		data() {
			return {
				// 点击选择商品
				click_id: 0,
				// 遮罩层与动画
				animationData: {},
				// 商品数量
				goodnum: 1,
				// 遮罩层初始化状态
				showModalStatus: false,
				
				// status: false,
				goodslist: [{
						goodId: 1,
						goodimg: '/static/images/phone/phone-1.webp',
						goodname: '一加 Ace 3 Pro 24GB+1TB 钛空镜银 第三代骁龙 8 旗舰芯片 6100mAh 冰川电池',
						goodName: '一加 Ace 3 Pro 24GB+1TB 钛空镜银',
						goodNames:'一加 Ace 3 Pro ',
						goodtext: '1.5k东方屏 游戏独显 天工散热系统',
						goodspecs: '已选: 钛空镜银, 24GB+1TB, 标准版, 1件, 可选服务',
						goodprice: '5299',
					},
					{
						goodId: 2,
						goodimg: '/static/images/phone/phone-2.webp',
						goodname: '一加 Ace 3 Pro 24GB+1TB 钛空镜银 第三代骁龙 8 旗舰芯片 6100mAh 冰川电池',
						goodName: '一加 Ace 3 Pro 24GB+1TB 钛空镜银',
						goodNames:'一加 Ace 3 Pro ',
						goodtext: '1.5k东方屏 游戏独显 天工散热系统',
						goodspecs: '已选: 钛空镜银, 24GB+1TB, 标准版, 1件, 可选服务',
						goodprice: '1668',
					},
					{
						goodId: 3,
						goodimg: '/static/images/phone/phone-3.webp',
						goodname: '一加 Ace 3 Pro 24GB+1TB 钛空镜银 第三代骁龙 8 旗舰芯片 6100mAh 冰川电池',
						goodName: '一加 Ace 3 Pro 24GB+1TB 钛空镜银',
						goodNames:'一加 Ace 3 Pro ',
						goodtext: '1.5k东方屏 游戏独显 天工散热系统',
						goodspecs: '已选: 钛空镜银, 24GB+1TB, 标准版, 1件, 可选服务',
						goodprice: '4079',
					},
					{
						goodId: 4,
						goodimg: '/static/images/phone/phone-4.webp',
						goodname: '一加 Ace 3 Pro 24GB+1TB 钛空镜银 第三代骁龙 8 旗舰芯片 6100mAh 冰川电池',
						goodName: '一加 Ace 3 Pro 24GB+1TB 钛空镜银',
						goodNames:'一加 Ace 3 Pro ',
						goodtext: '1.5k东方屏 游戏独显 天工散热系统',
						goodspecs: '已选: 钛空镜银, 24GB+1TB, 标准版, 1件, 可选服务',
						goodprice: '1678',
					},
					{
						goodId: 5,
						goodimg: '/static/images/phone/phone-5.webp',
						goodname: '一加 Ace 3 Pro 24GB+1TB 钛空镜银 第三代骁龙 8 旗舰芯片 6100mAh 冰川电池',
						goodName: '一加 Ace 3 Pro 24GB+1TB 钛空镜银',
						goodNames:'一加 Ace 3 Pro ',
						goodtext: '1.5k东方屏 游戏独显 天工散热系统',
						goodspecs: '已选: 钛空镜银, 24GB+1TB, 标准版, 1件, 可选服务',
						goodprice: '2799',
					},
					{
						goodId: 6,
						goodimg: '/static/images/phone/phone-6.webp',
						goodname: '一加 Ace 3 Pro 24GB+1TB 钛空镜银 第三代骁龙 8 旗舰芯片 6100mAh 冰川电池',
						goodName: '一加 Ace 3 Pro 24GB+1TB 钛空镜银',
						goodNames:'一加 Ace 3 Pro ',
						goodtext: '1.5k东方屏 游戏独显 天工散热系统',
						goodspecs: '已选: 钛空镜银, 24GB+1TB, 标准版, 1件, 可选服务',
						goodprice: '2579',
					},
				],
				// cartList:[]
			}
		},
		methods: {
			click_index(index){
				this.click_id = index,
				this.showModal();
			},
			detail(){
				uni.navigateTo({
					url:"../detail/detail/detail"
				})
			},
			// 显示遮罩层
			showModal: function() {
					setTimeout(() => {
							this.showModalStatus = true
					}, 100)
			},
			// 隐藏遮罩层
			hideModal: function() {
					setTimeout(() => {
			
							this.showModalStatus = false
					}, 100)
			},
			// 购物车物品数量加减
			reducenum() {
				if (this.goodnum > 1) {
					this.goodnum--
				}
				console.log(this.goodnum);
				return
			},
			addnum() {
				this.goodnum++
				console.log(this.goodnum);
				return
			},
			close_box() {
				this.hideModal();
			},
			// pay_ment() {
			// 	wx.navigateTo({
			
			// 	})
			// },
			
			// 加入购物车
			addToCart() {
				console.log("加入购物车");
				const skuGood = {
					goodId: this.goodslist[this.click_id].goodId,
					// 商品选择数量 this.goodnum
					goodnub: this.goodnum,
					goodimg: this.goodslist[this.click_id].goodimg,
					goodtext: this.goodslist[this.click_id].goodtext,
					goodName: this.goodslist[this.click_id].goodName,
					goodprice: this.goodslist[this.click_id].goodprice,
			
					//是否勾选
					isSelected: true,
					//是否触摸移动  滑动删除时用到
					isTouchMove: false,
				}
			
				let cartData = getStorage('cartList') || {}
				//首先要有这条商品记录，其次数量大于等于1就不再重新set缓存了，直接把数量加上现在的数量即可
				if (cartData[skuGood.goodId] && cartData[skuGood.goodId].goodnub >= 1) {
					cartData[skuGood.goodId].goodnub += Number(this.goodnum)
					console.log('商品已存在，加上新增的', this.goodnum);
				} else {
					// 如果没有此条记录，就把set缓存进去
					cartData[skuGood.goodId] = skuGood
				}
				setStorage('cartList', cartData)
				//导入自定义,使用弹框提示
				tips.toast('加入购物车成功~')
			
				//调用隐藏对话框，把下方弹窗隐藏
				this.hideModal()
				//把商品的选择数量重置为1
				this.goodnum = 1
			
			},
		}
	}
</script>

<style lang='less' scoped>
	.top {
		width: 100%;
		height: 50px;
		/* background-color: pink; */
	}

	.option {
		/* width:100%; */
		height: 50px;
		background-color: #27ba9b;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 5px;
		transition: all 0.5s;
	}

	.recomm {
		flex-basis: 25%;
		flex-shrink: 0;
		transition: all 0.5s;
	}

	.open {
		/* width:100%; */
		height: 60px;
		background-color: pink;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		transition: all 0.5s;
		padding: 10px;
	}

	.open .text {
		margin-bottom: 10px;
	}
	.content{
		width:100%;
		height:100%;
		/* background-color:pink; */
		margin-top:10px;
		overflow:hidden;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
	}
	.options{
		width:160px;
		height:230px;
		background-color:white;
		margin:10px;
		position: relative;
	}
	.options .img{
		width:160px;
		height:160px;
	}
	.options .text{
		/* padding-left:15px; */
		padding:5px 0px 0px 15px;
		
	}
	.options .texts{
		/* padding-left:15px; */
		color:red;
		font-size:18px;
		font-weight:600;
		padding:10px 0px 0px 15px;
	}
	.options .shop{
		position:absolute;
		bottom:1px;
		left:120px;
		
	}
	.options .shop image{
		width:30px;
		height:30px;
		border-radius:10px;
	}
	
	
	
	/* 弹出选择框 */
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 10;
		color: #fff;
	}
	
	/* 底部框 */
	.bottom_box {
		height: 350px;
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0px;
		left: 0;
		z-index: 20;
		background: #FFFFFF;
		// padding:10px;
	}
	
	.bottom_box_center {
		position: relative;
		width: 670rpx;
		height: 250rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}
	
	.right_x {
		display: inline-block;
		float: right;
		margin-top: -30rpx;
		width: 18px;
		height: 3px;
		background: #D9D9D9;
		line-height: 0;
		font-size: 0;
		vertical-align: middle;
		-webkit-transform: rotate(45deg);
	}
	
	.right_x:after {
		content: "/";
		display: block;
		width: 18px;
		height: 3px;
		background: #D9D9D9;
		-webkit-transform: rotate(-90deg);
	}
	
	.box_center_img {
		width: 240rpx;
		height: 240rpx;
		margin-top: 5rpx;
	}
	
	.box_center_img>image {
		width: 240rpx;
		height: 240rpx;
		margin-top: 5rpx;
	}
	
	.box_center_right {
		position: absolute;
		margin-left: 280rpx;
		margin-top: -240rpx;
		width: 390rpx;
		height: 250rpx;
	}
	
	.box_center_right1 {
		width: 100%;
		font-family: 'Source Han Sans CN';
		font-style: normal;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 42rpx;
		display: flex;
		align-items: center;
		color: #000000;
	}
	
	.box_center_right2 {
		position: relative;
		display: flex;
		width: 371rpx;
		height: 48rpx;
		margin-top: 13rpx;
		margin-left: -25rpx;
	}
	
	.right2_text_view {
		width: 78rpx;
		height: 39rpx;
		margin-top: 26rpx;
	}
	
	.right2_child {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 108rpx;
		height: 42rpx;
		margin-left: 25rpx;
		border: 1px solid #B80000;
	}
	
	.right2_child:hover {
		width: 108rpx;
		height: 42rpx;
		margin-left: 25rpx;
		border: 1px solid #B80000;
		background: #FFF0F0;
		;
	}
	
	.right2_child_text {
		width: 80rpx;
		height: 29rpx;
		font-family: 'Source Han Sans CN';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #B80000;
	}
	
	.right2_text {
		font-family: 'Source Han Sans CN';
		font-style: normal;
		font-weight: 400;
		font-size: 15px;
		line-height: 17px;
		align-items: center;
		color: #3A3A3A;
		margin-left: 20px;
	}
	
	.box_center_right3 {
		position: relative;
		top:50px;
		width: 371rpx;
		height: 48rpx;
		margin-top: 40px;
		/* display:flex; */
		/* justify-content:space-between; */
		/* align-items:center; */
	}
	
	
	.bottom_box_footer {
		position: relative;
		width: 330px;
		margin: 0 auto;
		margin-top: 30px;
	
	}
	
	.box_footer_left {
		font-family: '宋体';
		font-style: normal;
		font-weight: 400;
		font-size: 15px;
		margin-left: 156px;
		line-height: 36px;
		display: flex;
		align-items: center;
		color: #B80000;
	}
	
	.box_footer_bottom {
		width: 210rpx;
		height: 39rpx;
		margin-top: -27px;
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 500;
		font-size: 21px;
		margin-left: 220px;
		line-height: 38px;
		display: flex;
		align-items: center;
		color: #B80000;
	}
	
	.box_footer_shop {
		position: relative;
		display: flex;
		justify-content:center;
		text-align:center;
		width: 100%;
		height: 75rpx;
		border: 1rpx solid #27ba9b;
		border-radius: 20px;
		margin-top: -10px;
		top:70px;
	
	}
	
	.box_footer_shop>text {
		font-family: 'Source Han Sans CN';
		font-style: normal;
		font-weight: 400;
		font-size: 36rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		text-align: center;
		color: #5C5C5C;
	}
	
	.box_footer_right {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 378rpx;
		height: 78rpx;
		margin-top: 30rpx;
		margin-left: 290rpx;
		border-radius: 12rpx;
		background: #CD1010;
	}
	
	.box_footer_right>text {
		font-family: 'Source Han Sans CN';
		font-style: normal;
		margin-top: 15rpx;
		font-weight: 500;
		font-size: 36rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		text-align: center;
		color: #FFFFFF;
	}
	
	/* 购物车的加减号 */
	.reduce {
		position: relative;
		border: 1rpx solid;
		width: 44rpx;
		height: 44rpx;
		color: #D9D9D9;
		transition: color .25s;
		margin-top: -40rpx;
		margin-left: 190rpx;
	
	}
	
	
	.reduce::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 28rpx;
		margin-left: -13rpx;
		margin-top: 0rpx;
		border-top: 2rpx solid;
	}
	
	.reduce:hover {
		color: #B80000;
	}
	
	.add {
		position: relative;
		border: 1rpx solid;
		width: 44rpx;
		height: 44rpx;
		color: #D9D9D9;
		transition: color .25s;
		margin-top: -45rpx;
		margin-left: 290rpx;
	}
	
	
	.add::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 28rpx;
		margin-left: -13rpx;
		margin-top: 0rpx;
		border-top: 2rpx solid;
	}
	
	.add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 28rpx;
		margin-left: 0rpx;
		margin-top: -13rpx;
		border-left: 2rpx solid;
	}
	
	.add:hover {
		color: #B80000;
	}
	
	.right2_items {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 43rpx;
		height: 39rpx;
		margin-top: -40rpx;
		margin-left: 240rpx;
	}
	
	.right2_items>text {
		font-family: 'Roboto';
		font-style: normal;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 35rpx;
		color: #B80000;
	}
</style>